<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        // ES5
        // function F(x, y) {
        //     this.x = x;
        //     this.y = y;
        // }

        // F.prototype.func = function() {
        //     return this.x + this.y;
        // }

        // var f = new F(1, 2);
        // console.log(f.__proto__ === F.prototype);
        // console.log(f.func());

        // ES6 语法糖
        class S{
            constructor(x, y) {
                console.log('super constructor');
            }
        }

        // 和上面的一样
        // class F {
        //     constructor(x, y) {
        //         super(x, y);
        //         this.x = x;
        //         this.y = y;
        //     }

        //     func() {
        //         return this.x + this.y;
        //     }
        // }
        // end
        class F extends S {
            constructor(x, y) {
                super(x, y);
                this.x = x;
                this.y = y;
            }

            func() {
                return this.x + this.y;
            }
        }

        let f = new F(1, 2);
        console.log(f.func());


    </script>
</body>
</html>